<template>
  <div>
    <!-- 轮播 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in getDetail.gallery" :key="item.id">
          <!-- {{}} -->
          <img :src="item.img_url" width="100%" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 小字 -->
    <div class="wenzi">
      <div>
        <p>
          <van-icon name="success" />30天无忧退货
        </p>
      </div>
      <div>
        <p>
          <van-icon name="success" />48小时快速退货
        </p>
      </div>
      <div>
        <p>
          <van-icon name="success" />满88元包邮
        </p>
      </div>
    </div>

    <!-- 标题 -->
    <div class="title">
      <div>
        <p>{{info.name}}</p>
        <p>{{info.goods_brief}}</p>
        <p>￥ {{info.retail_price}}.00 &nbsp;元</p>
      </div>
    </div>

    <!-- 弹出层 -->
    <div>
      <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    </div>

    <!-- 商品参数 -->
    <div class="shang">
      <h2>商品参数</h2>
      <div>
        <p v-for="item in getDetail.attribute" :key="item.id">
          <span>{{item.name}}</span>
          <span>&nbsp;{{item.value}}</span>
        </p>
      </div>
    </div>

    <!-- 商品详情 -->
    <div v-html="info.goods_desc" class="detail"></div>

    <!-- 常见问题 -->
    <div class="question">
      <p>——常见问题——</p>
      <div v-for="item in getDetail.issue" :key="item.id">
        <li>{{item.question}}</li>
        <p>{{item.answer}}</p>
      </div>
    </div>

    <!-- 相关产品 -->
    <div class="xiangguan">
      <p>——相关产品——</p>
      <van-grid :column-num="2">
        <van-grid-item
          @click="details(item.id)"
          v-for="item in getGoodsRelated.goodsList"
          :key="item.id"
        >
          <img :src="item.list_pic_url" width="90%" alt />
          <p>{{item.name}}</p>
          <p class="price">￥ {{item.retail_price}} 元</p>
        </van-grid-item>
      </van-grid>
    </div>
    <p>5</p>
    <p>5</p>

    <!-- 步进器 -->
    <van-sku
      v-model="show"
      ref="sku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @add-cart="onAddCartClicked"
    />

    <!-- 加入购物车 -->
    <van-goods-action class="cart">
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon @click="cart()" icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" @click="shou()" v-show="isShou==false" text="已收藏" color="#ff5000" />
      <van-goods-action-icon icon="star" @click="shou()" v-show="isShou==true" text="未收藏" color="#efefef" />
      <van-goods-action-button
        @click="showPopup(item.id)"
        v-for="item in productList"
        :key="item.id"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import {
  GetDetail,
  GetGoodsRelated,
  AddCart,
  CartGoodsCount
} from "@/request/api.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 获取当前点击的商品id
      id: this.$route.params.id,
      getDetail: "",
      info: "",
      show: false,
      value: 1,
      getGoodsRelated: "",
      productList: "",
      productId: "",
      sku: {
        tree: [], //规格类目 颜色 尺寸 。。。
        price: "", // 默认价格（单位元）
        stock_num: 100, // 商品总库存
        // 数据结构见下方文档
        hide_stock: false //是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: ""
      },
      messageConfig: {
        // 数据结构见下方文档
      },
      isShou:true
    };
  },
  methods: {
    // 收藏
    shou() {
      this.isShou = !this.isShou;
    },
    // 弹出层 ， 加入购物车
    showPopup() {
      let token = localStorage.getItem("token");
      if (token) {
        this.show = true;
      } else {
        Toast("请先登录");
        this.$router.push("/user");
      }
    },
    // 加入购物车
    onAddCartClicked() {
      AddCart({
        goodsId: this.id,
        productId: this.productList[0].id,
        number: this.$refs.sku.getSkuData().selectedNum
      }).then(res => {
        // console.log(res);
        // 显示添加成功
        this.$toast.success("添加成功");
        // 触发获取商品数量的方法，这样把商品数量拿到
        this.jiagou();
      });
      // 隐藏 商品规格面板
      this.show = false;
    },
    // 获取商品数量
    jiagou() {
      CartGoodsCount().then(res => {});
    },
    // 跳转到购物车
    cart() {
      this.$router.push("/cart");
    },
    details(d) {
      // console.log(d);
      this.$router.push("/detail/" + d);
      this.$router.go(0);
    }
  },
  components: {},
  created() {
    // 上面全部的接口
    GetDetail({ id: this.id }).then(res => {
      this.getDetail = res.data;
      this.info = res.data.info;
      this.productList = res.data.productList;
      // 步进器里商品的图片
      this.goods.picture = res.data.info.list_pic_url;
      // 步进器里商品的价格
      this.sku.price = res.data.info.retail_price;
      // 步进器里商品的数量
      this.sku.stock_num = res.data.info.goods_number;
      // console.log(res.data);
    });
    // 相关产品的接口
    GetGoodsRelated({ id: this.id }).then(res => {
      this.getGoodsRelated = res.data;
    });
  }
};
</script>

<style lang='less'  scoped >
// 文字 30天
.wenzi {
  padding-top: 0.1333rem;
  display: flex;
  justify-content: space-between;
  height: 0.2rem;
  font-size: 0.14rem;
  margin-bottom: 0.1333rem;
}
// title
.title {
  //   margin-bottom: 0.1333rem;
  border-bottom: 0.5px #cccccc solid;
  background-color: #fff;
  text-align: center;
  height: 1.8333rem;
  padding: 0.051rem 0;
  p {
    margin: 0.1333rem 0;
  }
  p:nth-child(1) {
    // background-color: red;
    height: 0.3333rem;
    line-height: 0.4333rem;
    padding-top: 0.4rem;
    padding: 0.1333rem 0;
    font-size: 0.2567rem;
  }
  p:nth-child(2) {
    margin: 0.2333rem 0;
    height: 0.2667rem;
    font-size: 0.1533rem;
  }
  p:nth-child(3) {
    margin-top: 0.0667rem;
    margin-bottom: 0.1333rem;
    color: rgb(182, 84, 84);
  }
}
// 弹出层
.tan {
  display: flex;
  div {
    margin-top: 0.2667rem;
    padding-top: 0.1333rem;
    p {
      height: 0.2rem;
      padding-bottom: 0.2rem;
    }
  }
}
// 弹框定位
.position {
  position: absolute;
  z-index: 8;
  bottom: 0.4667rem;
}
.van-overlay {
  height: 80%;
}
.number {
  padding-left: 0.2rem;
  p {
    height: 0.2rem;
    margin-bottom: 0.1333rem;
  }
}
// 商品参数
.shang {
  margin-top: 0.2rem;
  background-color: #fff;
  padding: 0.1333rem 0.1333rem;
  h2 {
    font-size: 0.2rem;
    margin-bottom: 0.1333rem;
  }
  p {
    font-size: 0.1333rem;
    background-color: #efefef;
    border-radius: 0.0667rem;
    margin-bottom: 0.0667rem;
    // text-align: center;
    // height: .1333rem;
    span {
      height: 0.35rem;
      line-height: 0.35rem;
      display: inline-block;
    }
    span:nth-child(1) {
      color: #999999;
      text-align: right;
      width: 0.9rem;
    }
    span:nth-child(2) {
      text-align: left;
    }
  }
}

// 常见问题
.question {
  background-color: #fff;
  margin-top: 0.2rem;
  p:nth-child(1) {
    text-align: center;
    // margin: .2rem 0;
    height: 0.4667rem;
    line-height: 0.4667rem;
  }
  div {
    padding: 0.1333rem 0.2rem;
    p {
      padding: 0 0.1333rem;
      color: #666666;
      font-size: 0.1333rem;
    }
  }
  li {
    height: 0.1333rem;
    padding-bottom: 0.1667rem;
  }
  li::marker {
    color: rgb(160, 61, 61);
  }
}
// 相关产品
.xiangguan {
  padding-top: 0.1333rem;
  background-color: #fff;
  text-align: center;
}
.price {
  margin: 0.1667rem 0;
  color: rgb(183, 87, 87);
}
// 购物车
.cart {
  z-index: 99;
}
</style>

<style>
/* 商品详情 */
.detail img {
  max-width: 100%;
}
</style>
